<template>
	<div>
		<van-nav-bar
		  title="下单"
			left-text="返回"
			 @click-left="handleLeftClick"
		/>
		<van-cell-group>
		  <van-cell title="商品名称" :value="formData.name" />
		  <van-cell title="商品原价" :value="formData.price" />
			<van-cell title="商品折扣" :value="formData.discount" />
			<van-cell title="商品库存" :value="formData.hasCount" />
			<van-cell title="商品描述" :value="formData.description" />
			<van-cell title="购买数量" :value="formData.count" >
				<div class="num">
					购买数量：
					<van-button class="btns" size="mini" @click="handlePlus(formData)">+</van-button>
					{{formData.count}}
					<van-button class="btns" size="mini" @click="handleSub(formData)">-</van-button>
				</div>
			</van-cell>
			<van-cell v-if="hasAddress" 
				title="收货地址" 
				is-link
				to="/user-address"
				:value="getAddressStr"/>
			<van-cell v-else title="收货地址" 
				is-link  value="点击设置"
				 to="/user-address"/>
			</van-cell>
			<van-field
			  v-model="formData.remark"
			  rows="2"
			  autosize
			  label="备注"
			  type="textarea"
			  maxlength="50"
			  placeholder="请输入留言"
			  show-word-limit
			/>
		</van-cell-group>
		<van-submit-bar
		  
		  :price="getTotalPrice"
		  button-text="提交订单"
		  @submit="handleShowPassword"
		/>
		<van-dialog v-model="show" 
			title="支付密码" 
			show-cancel-button
			@confirm="onSubmit">
		  <van-field v-model="formData.password" type="password" placeholder="请输入密码" />
		</van-dialog>
	</div>
</template>

<script>
	import {getAddressListForPage} from '@/api/address-api.js'
	import {insertOrder} from '@/api/order-api.js'
	export default{
		computed:{
			getAddressStr(){
				return this.addressInfo.province+
					this.addressInfo.city+
					this.addressInfo.area+
					this.addressInfo.address
			},
			getTotalPrice(){
				return this.formData.price*this.formData.discount/10*this.formData.count*100
			}
		},
		methods:{
			handleLeftClick(){
				this.$router.history.go(-1)
			},
			handlePlus(formData){
				this.formData.count = this.formData.count+1
				if(this.formData.count>=this.formData.hasCount){
					this.formData.count = this.formData.hasCount
				}
			},
			handleSub(formData){
				this.formData.count = this.formData.count-1
				if(this.formData.count<=1){
					this.formData.count = 1
				}
			},
			async getAddressListForPage(){
				let res = await getAddressListForPage({pno:1,psize:10})
				if(res.data.code == 200){
					let list = res.data.data.list;
					console.log(list)
					if(list.length == 0){
						this.hasAddress = false
					}else if(list[0].isDefault != 1){
						this.hasAddress = false
					}else{
						this.hasAddress = true
						this.addressInfo = list[0]
					}
					
				}
			},
			handleShowPassword(){
				if(this.hasAddress ==false){
					this.$notify({type:'danger',message:'您还没有选择收货地址'})
					return
				}
				this.show = true
			},
			async onSubmit(){
				let formData = this.formData;
				let addressInfo = this.addressInfo;
				console.log(formData,addressInfo)
				let obj = {
					...addressInfo,
					goodsId:formData.id,
					type:1,
					addressId:addressInfo.id,
					count:formData.count,
					goodsName:formData.name,
					goodsPrice:formData.price,
					goodsDiscount:formData.discount,
					remark:formData.remark,
					pay:this.getTotalPrice/100,
					password:formData.password
				}
				console.log(obj)
				let res = await insertOrder(obj)
				if(res.data.code == 200){
					this.$notify({type:"success",message:res.data.msg})
					this.$router.history.go(-1)
				}
			}
		},
		data(){
			return {
				formData:{},
				addressInfo:{},
				hasAddress:false,
				show:false
			}
		},
		async created(){
			await this.getAddressListForPage()
			let formData = this.$route.params.formData;
			if(formData == undefined){
				formData = JSON.parse(sessionStorage.orderData1)
			}else{
				formData.remark = ''
				formData.hasCount = formData.count
				formData.count = 1
			}
			sessionStorage.orderData1 = JSON.stringify(formData)
			this.formData = formData
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.num{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-weight: bold;
		.btns{
			line-height: 12px;
			height: 14px;
		}
	}
</style>
